<template>
	<view>
		<view class="content">
			<rich-text :nodes="question.content == undefined || question.content == null ? '' : question.content" :selectable="false" image-menu-prevent></rich-text>
		</view>
		<view class="answer">
			<u--textarea id="textarea" @input="update($event)" v-model="content" maxlength="200" autoHeight count></u--textarea>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'noun-interpretation',
		data() {
			return {
				content: ''
			}
		},
		created() {
			if (this.$props.answer) {
				this.$data.content = this.$props.answer.content == null ? '' : this.$props.answer.content;
			}
		},
		beforeUpdate() {
			if (this.$props.answer) {
				this.$data.content = this.$props.answer.content == null ? '' : this.$props.answer.content;
			}
		},
		methods: {
			update: function(text) {
				if (this.$props.disabled) {
					return;
				}
				this.$props.answer.content = this.$data.content;
				this.$props.change(this.$props.question.questionId);
			}
		},
		props: {
			question: {
				type: Object,
				value: {}
			},
			answer: {
				type: Object,
				value: {}
			},
			change: {
				type: Function,
				value: function(questionId) {}
			},
			disabled: {
				type: Boolean,
				value: false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 710rpx;
		margin: 12rpx 20rpx;
		font-size: 36rpx;
	}

	.answer {
		width: 710rpx;
		margin: 12rpx 20rpx;
		
		#textarea {
			margin: 6rpx 0 0;
		}
	}
</style>
